<!DOCType html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #ball{width:100px;height:100px;background-color:rgba(0,177,255,.5);border-radius:50%;margin-left: 0px;}
        #ball1{width:100px;height:100px;background-color:rgba(58,177,38,.5);border-radius:50%;margin-left: 0px;}
        #ball2{width:100px;height:100px;background-color:rgba(177,38,178,.5);border-radius:50%;margin-left: 0px;}
        #ball3{width:100px;height:100px;background-color:rgba(35,117,98,.5);border-radius:50%;margin-left: 0px;}
        #ball4{width:100px;height:100px;background-color:rgba(177,80,38,.5);border-radius:50%;margin-left: 0px;}
        .container{position:absolute;left:400px;top:410px;}
        /*.box{height:100px;}*/
    </style>
</head>
<body>
    <div class="box"><div id="ball"></div></div>
    <div class="box"><div id="ball1"></div></div>
    <div class="box"><div id="ball2"></div></div>
    <div class="box"><div id="ball3"></div></div>
    <div class="box"><div id="ball4"></div></div>
    <div class="container">
        <input type="button" value="播放" id="btn" >
        <input type="button" value="暂停" id="btn1" >
        <input type="button" value="播放2" id="btn2" >
        <input type="button" value="暂停2" id="btn21" >
        <input type="button" value="播放3" id="btn3" >
        <input type="button" value="暂停3" id="btn31" >
        <input type="button" value="播放4" id="btn4" >
        <input type="button" value="暂停4" id="btn41" >
        <input type="button" value="播放5" id="btn5" >
        <input type="button" value="暂停5" id="btn51" >
    </div>
    <script>
    var btn,btn1,btn2,btn21,btn3,btn31,btn4,btn41,btn5,btn51;
    btn = $$('btn');
    btn1 = $$('btn1');
    btn2 = $$('btn2');
    btn21 = $$('btn21');
    btn3 = $$('btn3');
    btn31 = $$('btn31');
    btn4 = $$('btn4');
    btn41 = $$('btn41');
    btn5 = $$('btn5');
    btn51 = $$('btn51');
    var move = AnimateBall('ball');
    btn.onclick = move.play(50,500);
    btn1.onclick = move.pause;
    var move1 = AnimateBall('ball1');
    btn2.onclick = move1.play(100,700);
    btn21.onclick = move1.pause;
    var move2 = AnimateBall('ball2');
    btn3.onclick = move2.play(75,600);
    btn31.onclick = move2.pause;
    var move3 = AnimateBall('ball3');
    btn4.onclick = move3.play(30,800);
    btn41.onclick = move3.pause;
    var move4 = AnimateBall('ball4');
    btn5.onclick = move4.play(125,500);
    btn51.onclick = move4.pause;



    function AnimateBall (id) {
        var timer,scaleTimer,scaleOffset,moveOffset,orginalMarginLeft;
        var ball = $$(id);
        moveOffset = 1;
        orginalMarginLeft = parseInt(window.getComputedStyle(ball).marginLeft);
        var o = {
            play: function(fps,end){
                function doBall(){
                        clearInterval(scaleTimer);
                        clearInterval(timer);
                        function ScaleBall () {
                            var ballWidth = parseInt(window.getComputedStyle(ball).width);
                            var ballHeight = parseInt(window.getComputedStyle(ball).height);
                            if(ballWidth<=30){
                                scaleOffset = 1;
                            }else if(ballWidth>=100){
                                scaleOffset = -1;
                            }
                            ball.style.height = ballHeight + scaleOffset + 'px';
                            ball.style.width = ballWidth + scaleOffset + 'px';
                        }
                        function moveBall () {
                            var ballMarginLeft = parseInt(window.getComputedStyle(ball).marginLeft);
                            if (ballMarginLeft<=orginalMarginLeft) {
                                moveOffset = 2;
                            }else if(ballMarginLeft>=end){
                                moveOffset = -2;
                            }
                            ball.style.marginLeft = ballMarginLeft + moveOffset + 'px';
                        }
                        var m = 1000/fps;
                        scaleTimer = setInterval(ScaleBall,50);
                        timer = setInterval(moveBall,m);
                }
                return doBall;
            },
            pause: function(){
                clearInterval(timer);
                clearInterval(scaleTimer);
            }
        }
        return o;
    }




        function $$(id){
            return document.getElementById(id);
        }
    </script>

</body>
</html>